<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click="back">
					<image class="title_1_icon" src="../../../../static/mine/finish/back.png" mode="aspectFit"></image>
				</view>
				<view class="title_1_text">选择服务点</view>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--搜索框-->
		<view class="content_2">
			<view class="search_view">
				<image class="search_icon" src="../../../../static/order/search/search.png"></image>
				<input class="search_input" placeholder="请输入您的地址" disabled="true" @click="toSearch"></input>
			</view>
		</view>
		<!--地图-->
		<map class="content_3" :style="{'height': mapheight + 'px'}" :latitude="latitude" :longitude="longitude" :markers="covers">

		</map>
		<!--服务点列表-->
		<view class="content_4">
			<scroll-view scroll-y class="list_view">
				<block v-for="(item_list, index_list) in list" :key='index_list'>
					<view class="list" @click="Changelocate(index_list)">
						<view class="list_left">
							<view class="list_name">{{item_list.shopname}}</view>
							<view class="list_address">{{item_list.shopaddress}}</view>
						</view>
						<view class="list_right_active" v-if="showindex == index_list"></view>
						<view class="list_right" v-if="showindex != index_list"></view>
					</view>
					<view class="list_line" style="height: 4upx; background-color: #F7F8FA; margin-bottom: 20upx;"></view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '../../../../utils/request.js'
	var app = getApp()

	export default {
		data() {
			return {
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				mapheight: '',
				//右侧图标显示
				showindex: 0,
				//服务点列表
				list:[
					{
						shopname: '服务点xxxx',
						shopaddress: '上海市黄浦区南昌路209弄-5号',
						latitude: 40.909,
						longitude: 117.39742,
					},
					{
						shopname: '服务点xxxx',
						shopaddress: '上海市黄浦区南昌路209弄-5号',
						latitude: 37.909,
						longitude: 115.39742,
					},
					{
						shopname: '服务点xxxx',
						shopaddress: '上海市黄浦区南昌路209弄-5号',
						latitude: 37.909,
						longitude: 118.39742,
					},
					{
						shopname: '服务点xxxx',
						shopaddress: '上海市黄浦区南昌路209弄-5号',
						latitude: 38.909,
						longitude: 116.39742,
					},
					{
						shopname: '服务点xxxx',
						shopaddress: '上海市黄浦区南昌路209弄-5号',
						latitude: 39.909,
						longitude: 115.39742,
					}
				],
				//这个是地图组件的中心位置
				latitude: 39.909,
				longitude: 116.39742,
				//这个是点的位置
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}, ]
			}
		},
		onLoad() {
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
					this.mapheight = res.windowHeight + uni.upx2px(260)
				},
			})
		},
		methods: {
			//点击列表 改变地图标点位置
			Changelocate:function(index) {
				this.latitude = this.list[index].latitude
				this.longitude = this.list[index].longitude
				this.covers[0].latitude = this.list[index].latitude
				this.covers[0].longitude = this.list[index].longitude
				//列表右侧图标显示
				this.showindex = index
			},
			
			//跳转搜索页面
			toSearch:function() {
				uni.navigateTo({
					url: '/pages/order/confirm/service/search'
				})
			},
			
			//返回上一页面
			back:function () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 9999;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	/*
		搜索框样式
	*/
	.content_2 {
		height: 125upx;
		background-image: linear-gradient(#D92200, #CF1600); //颜色渐变效果(上下)
		padding: 0 25upx;
		display: flex;
		align-items: center;
	}

	.search_view {
		height: 64upx;
		width: 700upx;
		background-color: #FFFFFF;
		border-radius: 64upx;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.search_icon {
		width: 30upx;
		height: 30upx;
	}

	.search_input {
		height: 30upx;
		width: 500upx;
		margin-left: 20upx;
		font-size: 26upx;
	}

	/*
		地图样式
	*/
	.content_3 {
		margin-top: -500upx;
		width: 750upx;
		position: fixed;
		z-index: -1;
	}

	/*
		服务点列表样式
	*/
	.content_4 {
		position: fixed;
		height: 550upx;
		width: 700upx;
		bottom: 30upx;
		left: 25upx;
		background-color: #FFFFFF;
		border-radius: 24upx;
		display: flex;
		align-items: center;
		padding-top: 40upx;
	}

	.list_view {
		height: 550upx;
		width: 650upx;
		margin: 0 auto;
	}
	
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	  }
	
	.list {
		height: 110upx;
		margin-bottom: 4upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list_left {
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.list_right_active{
		height: 36upx;
		width: 36upx;
		background-color: #007AFF;
		border-radius: 36upx;
	}
	
	.list_right{
		height: 36upx;
		width: 36upx;
		border-radius: 36upx;
		border: solid 2upx #D5D5D5;
	}

	.list_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.list_address {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #848587;
	}
</style>
